
import React,{useState,useEffect,useContext,createContext} from 'react'

export default function App () {
    return(
        <div>
            <Input></Input>
            <Expensivecp></Expensivecp>
        </div>
    )
}

function Input() {
    const [num,setNum] = useState(0)
    return(
        <>
            <input value={num}  onChange={e=>setNum(e.target.value)}></input>
            <p>num</p>            
        </>
    )
}

function Expensivecp () {
    let now = performance.now()
    while(performance.now() - now < 100){}
    console.log('耗时的组件')
    return(
        <div>耗时的组件</div>
    )
}


// ================================================================================//


export default function App () {
    return(
        <InputWrap>
            <Expensivecp></Expensivecp>
        </InputWrap>
    )
}

function InputWrap({children}) {
    const [num,setNum] = useState(0)
    return(
        <div title={num + ''}>
            <input value={num}  onChange={e=>setNum(e.target.value)}></input>
            <p>num</p>        
            {children}    
        </div>
    )
}

function Expensivecp () {
    let now = performance.now()
    while(performance.now() - now < 100){}
    console.log('耗时的组件')
    return(
        <div>耗时的组件</div>
    )
}

// ================================================================================//
import React,{useState,useEffect,useContext,createContext} from 'react'

const numCtx = createContext(0)

const updateNumCtx = createContext(()=>) 

export default function App () {  //App状态是变化的
    const [num,updateNum] = useState(0) 
    return(
        <numCtx.Provider value={num}>
            <updateNumCtx.Provider value={updateNumCtx}>
                <Middle></Middle>
            </updateNumCtx.Provider>
        </numCtx.Provider>
    )
}

function Middle() {  //父组件middle不变的
    return(
        <>
            <Button></Button> 
            <Show></Show>
        </>
    )
}
function Button () {
    const updateNum = useContext(updateNumCtx) //使用了updateNumCtx是个函数，是不变的；可是每次点击Button会重新渲染
    console.log('btn render')
    return (
        <button onClick={()=>updateNum(Math.random())}>产生随机数</button>
    )
}

function show() {
    const num = useContext(numCtx) //使用了num,是变化的； 
    return(
        <p>num</p>
    )
}


const Middle = React.memo(()=>{
    return(
        <>
            <Button></Button> 
            <Show></Show>
        </>
    )
})

// ================================================================================//
import React,{useState,useEffect,useContext,createContext} from 'react'

export default function App () {
    const [count,setCount] = setState(0)
    const result =useMemo(()=>{
        return count * 2
    },[count])
    return(
        <div>
            <p>{count}{result}</p>
            <p onClick={()=>setCount(count+1)}>增加</p>
        </div>
    )
}



module.exports = (source) =>{
    console.log(source)
    return 'hello aaa'
}


if(!postBackMes30) {
    window.postBackMes30 =  setInterval(()=>{
        //这里放 websocket的传送信息方法
    },30*1000)
}

